<template>
  <view class="letter_container">
    <view class="image">
      <scroll-view scroll-x="true">
        <view class="image_container">
          <view
            class="image_content"
            :class="{ active: index === currentIndex }"
            v-for="(item, index) in letterList"
            :key="index"
            @click="letterChange(item, index)"
          >
            <image :src="item.imageUrl" mode="widthFix"></image>
            <view class="image_bg"> </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="letter_content">
      <view class="video">
        <video
          src="https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/video/letterdiscrimination/video/zimusong.mp4"
          controls
          object-fit="fill"
        ></video>
      </view>
      <view class="content">
        <view class="content_title">
          歌词
        </view>
        <view class="content_scroll">
          <scroll-view scroll-y="true" style="height:448rpx">
            <view class="content_text">
              <view>
                A is for apple, a a apple<br />
                B is for ball, b b ball<br />
                C is for cat, c c cat<br />
                D is for dog, d d dog<br />
                E is for elephant, e e elephant<br />
                F is for little fish, f f fish<br />
                G is for gorilla, g g gorilla<br />
                H is for hat, h h hat<br />
                I is for igloo, i i igloo<br />
                J is for juice, j j juice<br />
                K is for kangaroo, k k kangaroo<br />
                L is for lion, l l lion<br />
                M is for monkey, m m monkey<br />
                N is for nose, n n nose<br />
                O is for octopus, o o octopus<br />
                P is for pig, p p pig<br />
                Q is for quesion, q q question<br />
                R is for ring, r r ring<br />
                S is for sun, s s sun<br />
                T is for ten, t t ten<br />
                U is for umbrella, u u umbrella<br />
                V is for van, v v van<br />
                W is for watch, w w watch<br />
                X is for box, x x box<br />
                Y is for yellow, y y yellow<br />
                Z is for zoo, z z zoo<br />
                So many things for you to learn about, so many ways to sing your
                song.<br />
                So many things for you to learn about, so many ways to sing your
                song.
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
import { findLetterList } from "@/api/spelling";
export default {
  components: {},
  data() {
    return {
      letterList: [],
      currentIndex: 0,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      findLetterList().then((res) => {
        this.letterList = res.data;
      });
    },
    letterChange(item, index) {
      this.currentIndex = index;
      this.play(item);
    },
    play(item) {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src =
        "https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/audio/app/" +
        item.lowerCase +
        ".mp3";
      englishAudioContext.play();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./LetterIdentification";
</style>
